{{ header }}{{ column_left }}
<div id="content">
  <div class="page-header">
    <div class="container-fluid">
      <h1>{{ heading_title }}</h1>
      <ol class="breadcrumb">
        {% for breadcrumb in breadcrumbs %}
          <li class="breadcrumb-item"><a href="{{ breadcrumb.href }}">{{ breadcrumb.text }}</a></li>
        {% endfor %}
      </ol>
    </div>
  </div>
  <div class="container-fluid">
    <div class="card">
      <div class="card-header"><i class="fas fa-puzzle-piece"></i> {{ text_list }}</div>
      <div class="card-body">
        <fieldset>
          <legend>{{ text_type }}</legend>
          <div class="card bg-light">
            <div class="card-body">
              <div class="input-group">
                <select name="type" class="form-control">
                  {% for category in categories %}
                    {% if type == category.code %}
                      <option value="{{ category.href }}" selected="selected">{{ category.text }}</option>
                    {% else %}
                      <option value="{{ category.href }}">{{ category.text }}</option>
                    {% endif %}
                  {% endfor %}
                </select>
                <div class="input-group-append">
                  <span class="input-group-text"><i class="fas fa-filter"></i>&nbsp;{{ text_filter }}</span>
                </div>
              </div>
            </div>
          </div>
        </fieldset>
        <div id="extension"></div>
      </div>
    </div>
  </div>
</div>
{% if categories %}
  <script type="text/javascript"><!--
  $('select[name="type"]').on('change', function() {
	  $.ajax({
		  url: $('select[name="type"]').val(),
		  dataType: 'html',
		  beforeSend: function() {
			  $('.fa-filter').addClass('fa-circle-notch fa-spin');
			  $('.fa-filter').removeClass('fa-filter');
			  $('select[name=\'type\']').prop('disabled', true);
		  },
		  complete: function() {
			  $('.fa-circle-notch').addClass('fa-filter');
			  $('.fa-circle-notch').removeClass('fa-circle-notch fa-spin');
			  $('select[name=\'type\']').prop('disabled', false);
		  },
		  success: function(html) {
			  $('#extension').html(html);
		  },
		  error: function(xhr, ajaxOptions, thrownError) {
			  alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
		  }
	  });
  });

  $('select[name="type"]').trigger('change');

  $('#extension').on('click', '.btn-success', function(e) {
	  e.preventDefault();

	  var element = this;

	  $.ajax({
		  url: $(element).attr('href'),
		  dataType: 'html',
		  beforeSend: function() {
			  $(element).button('loading');
		  },
		  complete: function() {
			  $(element).button('reset');
		  },
		  success: function(html) {
			  $('#extension').html(html);
		  },
		  error: function(xhr, ajaxOptions, thrownError) {
			  alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
		  }
	  });
  });

  $('#extension').on('click', '.btn-danger, .btn-warning', function(e) {
	  e.preventDefault();

	  if (confirm('{{ text_confirm }}')) {
		  var element = this;

		  $.ajax({
			  url: $(element).attr('href'),
			  dataType: 'html',
			  beforeSend: function() {
				  $(element).button('loading');
			  },
			  complete: function() {
				  $(element).button('reset');
			  },
			  success: function(html) {
				  $('#extension').html(html);
			  },
			  error: function(xhr, ajaxOptions, thrownError) {
				  alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
			  }
		  });
	  }
  });
  //--></script>
{% endif %}

{{ footer }}
